import { ForwardedRef, forwardRef, memo } from 'react';
import type { FC, PropsWithChildren } from 'react';
import { Control, Controller } from 'react-hook-form';
import { Form, FormItemProps, Input, InputProps, InputRef } from 'antd';
import { PasswordProps } from 'antd/es/input';
import QueueAnim from 'rc-queue-anim';

const RxInput = forwardRef<
  any,
  PropsWithChildren<
    {
      name: string;
      control: Control<any>;
      item?: FormItemProps;
    } & Partial<InputProps>
  >
>(({ name, control, item, ...rest }, ref) => {
  const animateConfig = [{ opacity: [1, 0], translateY: [0, 5] }];

  return (
    <Controller
      name={name}
      control={control}
      render={({ field, fieldState }) => (
        <div ref={ref}>
          <Form.Item {...item}>
            <Input {...field} {...rest} />
            <QueueAnim animConfig={animateConfig}>
              {fieldState.error && (
                <p
                  className={'absolute leading-6 text-xs text-red-400'}
                  key={fieldState.error.message}
                >
                  {fieldState.error?.message}
                </p>
              )}
            </QueueAnim>
          </Form.Item>
        </div>
      )}
    />
  );
});

export default memo(RxInput);
